<!DOCTYPE html>
<html>
<head>
    <!-- from: https://phaser.io/sandbox/frame -->
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="gsw945" />
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
    <title>Phaser Demo With Parcel</title>
    <link rel="stylesheet" href="styles.css" />
    <style type="text/css">
        body,
        html {
            margin: 0;
            padding: 0;
            border: 0;
        }
        #game {
            border: 1px solid #fa1;
        }
    </style>
</head>
<body>
    <!-- <h1>Hello, World!</h1> -->
    <div class="page-body">
        <div id="game"></div>
    </div>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/phaser/3.52.0/phaser.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var config = {
            type: Phaser.AUTO,
            parent: 'game',
            width: 800,
            height: 600,
            backgroundColor: 0x2d2d2d,
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 200 }
                }
            },
            scene: {
                preload: preload,
                create: create,
                update: update,
                render: render
            }
        };

        var bob;
        var graphics;
        var offset;

        var game = new Phaser.Game(config);

        function preload ()
        {
            this.load.image('car', '/assets/demos/supercars-parsec.png');
        }

        function create ()
        {
            // var sprite = this.add.sprite(400, 300, 'car');
            var sprite = this.add.sprite(10, 10, 'car').setOrigin(0, 0);

            var shape = new Phaser.Geom.Polygon([
                0, 143,
                0, 92,
                110, 40,
                244, 4,
                330, 0,
                458, 12,
                574, 18,
                600, 79,
                594, 153,
                332, 152,
                107, 157
            ]);

            sprite.setInteractive(shape, Phaser.Geom.Polygon.Contains);

            //  Draw the polygon
            var graphics = this.add.graphics({ x: sprite.x - sprite.displayOriginX, y: sprite.y - sprite.displayOriginY });

            graphics.lineStyle(2, 0x00aa00);

            //  Input Event listeners
            
            var pointerText = this.add.text(20, game.canvas.height - 32, 'x:0, y:0', { fontSize: '18px', fill: '#fa1' });
            this.input.on('pointermove', function (pointer) {
                // console.log(pointer.x, pointer.y);
                pointerText.setText(`x:${pointer.x}, y:${pointer.y}`);
            });
            this.input.on('pointerdown', function (pointer) {
                console.log(pointer.x, pointer.y);
            });

            this.input.on('gameobjectover', function (pointer, gameObject, event) {
                gameObject.setTint(0x7878ff);
                
                event.stopPropagation();

                graphics.beginPath();

                graphics.moveTo(shape.points[0].x, shape.points[0].y);

                for (var i = 1; i < shape.points.length; i++)
                {
                    graphics.lineTo(shape.points[i].x, shape.points[i].y);
                }

                graphics.closePath();
                graphics.strokePath();
            });

            this.input.on('gameobjectout', function (pointer, gameObject, event) {
                gameObject.clearTint();

                event.stopPropagation();

                graphics.clear();
            });
        }

        function update ()
        {
            //
        }

        function render () {
            //
        }
    </script>
</body>
</html>